<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>涛宝商城-上传文件</title>
        <script th:src="@{appstyle/js/jquery-3.3.1.js}" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/bootstrap.min.css}"/>
		<script th:src="@{appstyle/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/summernote.css}"/>
		<script th:src="@{appstyle/js/summernote.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{appstyle/js/summernote-zh-CN.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="fileupload" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="username" />
文件上传:<input type="file" name="pic" />
<input type="submit" value="提交" />
</form>
<div style="margin-left: 20%;width: 500px;height: 200px;">
		       <div id="summernote"></div>
		    </div>
		    <br /><br /><br /><br /><br /><br /><br /><br /><br />
		    <div style="margin-left: 20%;width: 800px;height: 400px;">
		       <button id="btn1">显示书写的内容</button><br /><br />
		       <div id="html" style="width: 800px;height: 300px;background-color: lavender;border: 1px solid;"></div>
		    </div>
		  <script>
		    $(document).ready(function() {
		        //jquery创建一个summernote实例
		        $('#summernote').summernote({
		             //功能图标改为中文
		             lang: 'zh-CN',
		             //预设内容
		             placeholder: '请在此输入内容...',
		             height: 300,
		             width:800,
		             //回调函数
		             callbacks: {
		                   //初始化
		                  onInit: function() {
		                      //init
		                  },
		                  //焦点
		                  onFocus: function() {
		                      //focus
		                  },
		                  //图片文件上传
		                  onImageUpload: function(files, editor, $editable) {
		                      data = new FormData();  
		                      data.append("pic", files[0]);  
		                    $.ajax({  
		                        data : data,  
		                        type : "POST",  
		                        url : "fileupload",   
		                        cache : false,  
		                        contentType : false,  
		                        processData : false,  
		                        dataType : "text",  
		                        success: function(data) {  
		                        	alert(data);
		                            //[服务器所在文件所在目录位置]一般为"http://119.23.216.181/RoboBlogs/Upload_File/default_show.png"
		                            $('#summernote').summernote('insertImage', "http://49.232.168.42/"+data);
		                        },  
		                        error:function(){  
		                            alert("上传失败");  
		                        }  
		                    });  
		                  }
		                }
		             
		        });
		        $("button#btn1").click(function(){
		             var tt=$("#summernote").summernote("code");
		             $("div#html").html(tt);
		             alert(tt);
		        });
		        
		    }); 
		  </script>
</body>
</html>